<template>
  <div>
    <div class="addDataWrap">
      <el-form
        ref="addDataForm"
        :model="addDataForm"
        :rules="addDataRule"
        label-width="110px"
        label-positon="left"
      >
        <el-form-item prop="sampleName" label="样品名称：">
          <el-select v-model="addDataForm.sampleName" placeholder="请输入商品名称" style="width:40%">
            <!-- <el-option v-for="(item,index) in productNames" :key="index"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item prop="sampleType" label="样品型号：">
          <el-input
            v-model="addDataForm.sampleType"
            placeholder="请输入样品型号"
            @keyup.enter="handleAdd"
            style="width:40%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sampleKinds" label="样品类别：">
          <el-input
            v-model="addDataForm.sampleKinds"
            placeholder="请输入样品类别"
            @keyup.enter="handleAdd"
            style="width:40%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sampleBrand" label="样品品牌：">
          <el-input
            v-model="addDataForm.sampleBrand"
            placeholder="请输入样品品牌"
            @keyup.enter="handleAdd"
            style="width:40%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="typeDesc" label="规格描述：">
          <el-input
            type="textarea"
            :rows="4"
            v-model="addDataForm.typeDesc"
            placeholder="请输入规格描述"
            @keyup.enter="handleAdd"
            style="width:40%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="typeDesc" label="上传样品照片：">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <el-form-item prop="typeDesc" label="上传样品附件：">
          <div class="uploadBox flex">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">规格书</div>
            </el-upload>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
              style="margin-left:150px"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">承诺书</div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="flex" style="width:60%;justify-content:space-around">
            <el-button
              style="background: rgb(7, 131, 241);color: #fff;width:30%"
              @click="handleAdd"
            >提交</el-button>
            <el-button
              style="background: rgb(170, 170, 170);color: #fff;width:30%"
              @click="$router.go(-1)"
            >取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDataForm: {
        sampleName: "",
        sampleType: "",
        sampleKinds: "",
        sampleBrand: "",
        typeDesc: ""
      },
      addDataRule: {
        sampleName: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        sampleType: [
          { required: true, message: "请输入样品型号", trigger: "blur" }
        ],
        sampleKinds: [
          { required: true, message: "请输入样品类别", trigger: "blur" }
        ],
        sampleBrand: [
          { required: true, message: "请输入样品品牌", trigger: "blur" }
        ]
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    handleAdd() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.addDataWrap {
  width: 100%;
  background: #fff;
  padding: 10px;
  margin: 15px 0;
  .uploadBox{
    justify-content: flex-start
  }
}
</style>